<template>
  <div class="books">
    <div class="header">
      <div class="is-left">
        <a-icon class="left" type="left" @click="$router.go(-1)" />
        <h2>一起做菜吧</h2>
      </div>
    </div>
    <div class="cooks_wrap">
        <ul>
          <li
            v-for="(item, index) in categories"
            :key="index"
            class="cook-list"
          >
            <!-- <div class="cooks_title">
              <h3>{{ item.name }}({{ getItemProductAll(item) }})</h3>
            </div> -->
            <div class="cooks_detail">
              <ul>
                <li
                  v-for="(subItem, index) in item.sub_categories"
                  :key="index"
                >
                  <ul>
                    <li
                      v-for="(cook, i) in subItem.products"
                      :key="i"
                      class="products"
                    >
                      <div class="cook_info" v-if="!cook.combo_type">
                          <!-- <span class="cook_id">{{cook.id}}</span> -->
                          <!-- <li v-for="(id, index) in subItem.products" :key="index"> -->
                         <span class="cook_content" v-for="(book,i) in subItem.products" :key="i">{{cook.content}}</span>
                         <!-- </li> -->
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
     categories: [], // 页面数据
     
    };
  },
    mounted() {
    this.$http.get("/api/getMenu").then(
      (res) => {
        this.categories = res.data.data.categories;
        //this.id=res.data.data.categories.sub_catagories.products.id;
      },
    //   (err) => {}
    );
  },
};
</script>
<style lang="scss" scoped>
.books {
  .header {
    width: 100%;
    height: 4rem;
    background: #fff;
    padding: 15px;
    .left {
      display: flex;
      justify-content: left;
    }
    h2 {
      color: cadetblue;
      display: flex;
      font-size: 18px;
      justify-content: center;
    }
  }
}
</style>